<template>
  <h1>EL-栅格布局组件</h1>
<!-- 栅格布局组件一行24份 -->
  <el-row>
    <el-col :span="8" style="background-color: salmon;">111</el-col>
    <el-col :span="8" style="background-color: yellow;">222</el-col>
    <el-col :span="8" style="background-color: blue;">333</el-col>
  </el-row>
  <el-row :gutter="20">
<!--  :gutter="20" 栅格间距20px el-col的内间距 -->
    <el-col :span="12"><img src="imgs/rich.jpg" style="width: 100%" alt=""></el-col>
    <el-col :span="12"><img src="imgs/rich.jpg" style="width: 100%" alt=""></el-col>
  </el-row>
  <el-row :gutter="10">
   <el-col :span="4"><img src="imgs/rich.jpg" style="width: 100%" alt=""></el-col>
   <el-col :span="4"><img src="imgs/rich.jpg" style="width: 100%" alt=""></el-col>
   <el-col :span="4"><img src="imgs/rich.jpg" style="width: 100%" alt=""></el-col>
   <el-col :span="4"><img src="imgs/rich.jpg" style="width: 100%" alt=""></el-col>
   <el-col :span="4"><img src="imgs/rich.jpg" style="width: 100%" alt=""></el-col>
   <el-col :span="4"><img src="imgs/rich.jpg" style="width: 100%" alt=""></el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="4"><img src="imgs/rich.jpg" style="width: 100%" alt=""></el-col>
    <el-col :span="8"><img src="imgs/rich.jpg" style="width: 100%" alt=""></el-col>
    <el-col :span="12"><img src="imgs/rich.jpg" style="width: 100%" alt=""></el-col>
  </el-row>
  <el-row>
    <el-col :span="3" v-for="i in 8" style="border: 3px solid greenyellow;background-color: #0aa1ed;">{{i}}</el-col>
  </el-row>
  <h5>列偏移</h5>
  <el-row>
    <el-col :span="20" :offset="2">
      <img src="imgs/rich.jpg" style="width: 100%" alt="">
    </el-col>
  </el-row>
  <h5>布局嵌套</h5>
  <el-row>
    <el-col :span="12" style="border: 5px solid lightcoral;">111</el-col>
    <el-col :span="12" style="border: 5px solid red;">
      <el-row>
        <el-col :span="8" style="border: 5px solid lightgreen;">222</el-col>
        <el-col :span="8" style="border: 5px solid orange;">222</el-col>
        <el-col :span="8" style="border: 5px solid lightblue;">222</el-col>
      </el-row>
    </el-col>
  </el-row>
  <hr>
  <h5>我的主页</h5>

  <el-row :gutter="20">
    <el-col :span="8"><el-menu>
      <el-menu-item index="1">选项一</el-menu-item>
      <el-menu-item index="2">选项二</el-menu-item>
      <el-menu-item index="3">选项三</el-menu-item>
    </el-menu>
    </el-col>
    <el-col :span="16">
      <el-row :gutter="10">
        <el-col :span="8"><img src="imgs/rich.jpg" style="width: 100%" alt=""></el-col>
        <el-col :span="8"><img src="imgs/rich.jpg" style="width: 100%" alt=""></el-col>
        <el-col :span="8"><img src="imgs/rich.jpg" style="width: 100%" alt=""></el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script setup>

</script>


<style scoped>

</style>
